<!DOCTYPE html>

<html>
	<head>
		<title>HemiSphereLight and LensFlare</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<script type="text/javascript" src="../libs/OrbitControls.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			//once everything is loaded, we run our Three.js stuff.
			var orbit;

			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				
 				var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
 				renderer.setClearColor(0xaaaaff, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60,40,1,1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        scene.add(plane);


		        camera.position.x = -30;
		        camera.position.y = 40;
		        camera.position.z = 30;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        orbit = new THREE.OrbitControls(camera, renderer.domElement);

		        var boxGeo = new THREE.BoxGeometry(4,4,4);
		        var boxMtr = new THREE.MeshLambertMaterial({color: 0xeeeeee});
		        var box = new THREE.Mesh(boxGeo, boxMtr);
		        box.position.set(0, 4, 0);
		        box.castShadow = true;
		        scene.add(box);

		        var sphereGeo = new THREE.SphereGeometry(2, 20, 20);
		        var sphereMtr = new THREE.MeshLambertMaterial({color: 0xeeeeee});
		        var sphere = new THREE.Mesh(sphereGeo, sphereMtr);
		        sphere.position.set(-10, 4, 0);
		        sphere.castShadow = true;
		        scene.add(sphere);

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-10, 20, -10);
 				spotLight.shadowCameraNear = 2;
 				spotLight.shadowCameraFar = 300;
 				spotLight.shadowCameraFov = 90;
 				spotLight.intensity = 2;
 				scene.add(spotLight);

 				var texture3 = THREE.ImageUtils.loadTexture("../image/lensflare3.png");
 				var texture0 = THREE.ImageUtils.loadTexture("../image/lensflare0.png");
 				var texture4 = THREE.ImageUtils.loadTexture("../image/lensflare4.jpg");
 				var lensflare = new THREE.LensFlare(texture4, 300, 0.0, THREE.AdditiveBlending, new THREE.Color(0xffaacc));

 				lensflare.add(texture3, 60, 0.6, THREE.AdditiveBlending);
		        lensflare.add(texture3, 70, 0.7, THREE.AdditiveBlending);
		        lensflare.add(texture3, 120, 0.9, THREE.AdditiveBlending);
		        lensflare.add(texture3, 70, 1.0, THREE.AdditiveBlending);

 				lensflare.position.copy(spotLight.position);
 				scene.add(lensflare); 

 				var hemiLight = new THREE.HemisphereLight(0x00ff00, 0x0000ff, 0.5);
 				hemiLight.position.set(0, 500, 0);
 				scene.add(hemiLight);

 				var controls = new function() {
 					this.boxColor = 0xeeeeee;
 					this.sphereColor = 0xeeeeee;

 					this.skyColor = 0x00ff00;
 					this.groundColor = 0x0000ff;
 					this.hemiLight = true;
 				}

 				var gui = new dat.GUI();
 				gui.addColor(controls, "boxColor").onChange(function (e){
 					boxMtr.color = new THREE.Color(e);
 				});
				gui.addColor(controls, "sphereColor").onChange(function (e){
 					sphereMtr.color = new THREE.Color(e);
 				})
 				gui.addColor(controls, "skyColor").onChange(function (e){
 					hemiLight.color = new THREE.Color(e);
 				});
 				gui.addColor(controls, "groundColor").onChange(function (e){
 					hemiLight.groundColor = new THREE.Color(e);
 				})
 				gui.add(controls, "hemiLight").onChange(function (e){
 					hemiLight.visible = e;
 				})

 				//add animation
 				var step = 0.05;
 				var sum = 0;
 				render();
 				function render(){
 					stats.update();

 					box.rotation.x += step;
 					box.rotation.y += step;
 					box.rotation.z += step;
 					
 					sum += step;
 					sphere.position.x = -10 + ( 5 * (Math.cos(sum)));
       			    sphere.position.y = 10 + ( 4 * Math.abs(Math.sin(sum)));

       			    orbit.update();

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>